<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/css/longinner.css">
</head>
<body>
    <div class="tablet">
        <div class="tablet-aab">
                <h2>欢迎你来注册</h2>
                <span class="yonghu">用户名：<input type="text" id="username" class="username"></span>
              <span class="mima">  密码：<input type="password" id="password" class="password"></span>
               
               <span class="deng"><button id="btn">注册</button>
                <button type="reset" id="bbtn">取消</button>
                </span>
          </div>
        </div>
  <script>
    var usernameInput = document.querySelector('#username')
    var passwordInput = document.querySelector('#password')
    var btn = document.querySelector('#btn')
    btn.onclick = function () {
      var username = usernameInput.value;
      var password = passwordInput.value;
      
      // 发送后端，完成注册
      // 咱们用localStorage模拟存储
      var userInfo = { username, password }
      // 先把本地存储取出来
      var userList = localStorage.getItem('userList')
      // 判断是否已经存过
      if (userList) {
        // 已经存过至少一条了，先转成数组，把新的一条push进去，再重新存储以达到覆盖的效果
        userList = JSON.parse(userList)
        userList.push(userInfo)
        localStorage.setItem('userList', JSON.stringify(userList))
      } else {
        // 第一次存
        var arr = [userInfo]

        localStorage.setItem('userList', JSON.stringify(arr))
      }
      alert('注册成功，即将跳转登录页面')

      window.location.replace('/html/longin.html')
      // window.location.replace('./login.html')
      // window.open('./login.html')


    }
  </script>
</body>
<script src="/libs/require/require.min.js" ></script>
</html>